<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body,html {
			width: 100%;
			height: 100%;
		}
		.box {
			width: 100%;
			height: 100%;
			background-color: rgb(22, 186, 157);
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.left {
			flex: 1;
		}

		.right {
			flex: 1;
		}

		.search {
			width: 529px;
			height: 50px;
			border: 1px solid #fff;
			box-shadow: 0px 0px 10px #fff;
			position: relative;
			left: -549px;

			animation: search_box 1s linear forwards 1s;
		}
		.key {
			 width: 0px;
			 height: 22px;
			 background: url("key.png") no-repeat;
			 position: absolute;
			 top: 50%;
			 margin-top: -11px;

			 animation: key_bg 1s steps(5) forwards 2.5s;
		}
		.content {
			width: 529px;
			height: 372px;
			margin-top: 20px;
			position: relative;
			left: 50px;
			overflow: hidden;
		}

		.content img {
			position: absolute;
			top: -387px;
			animation: img_position 1s linear 5s forwards;
		}

		
		@keyframes search_box {
			from {
				left: -549px;
			}

			to {
				left: 50px;
			}
		}

		@keyframes key_bg {
			from {
				width: 0px;
			}

			to {
				width: 99px;
			}
		}

		@keyframes img_position {
			from {
				top:  -387px;
			}

			to {
				top:  0px;
			}
		}
	</style>
</head>
<body>
	<div class="box">
		
		 <div class="left">
		 	 <div class="search">
		 	 	 <div class="key"></div>
		 	 </div>
		 	 <div class="content">
		 	 	<img src="result.png">
		 	 </div>
		 </div>
		 <div class="right">
		 	 <img src="info_4.png">
		 </div>
	</div>
</body>
</html>